@import './theme.scss'; // 引入自定义主题

// 小红书风格的主题色
$primary-color: #fe2c55;  // 小红书红色
$primary-color-light: #ff4d6a;
$primary-color-dark: #e61c38;

// 中性色 - 深色主题
$background-color: #161722;  // 主背景色，深蓝黑色
$card-background: #232632;  // 卡片背景色，稍浅的深蓝黑
$text-color: #ffffff;  // 主文本颜色，白色
$text-color-secondary: rgba(255, 255, 255, 0.75);  // 次要文本，75%透明白
$text-color-light: rgba(255, 255, 255, 0.5);  // 辅助文本，50%透明白
$border-color: rgba(255, 255, 255, 0.1);  // 边框颜色，10%透明白

// 功能色
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #ff4d4f;

// 字体
page {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  background: $background-color;
  color: $text-color;
  font-size: 28px; // 基础字体大小
}

// 字体大小比例
$font-size-base: 28px;      // 基础字体大小
$font-size-large: 32px;     // 大号字体
$font-size-xlarge: 36px;    // 超大号字体
$font-size-small: 24px;     // 小号字体

// 通用样式
.container {
  padding: 24px 16px;
  box-sizing: border-box;
  background: $background-color;
}

.card {
  background: $card-background;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 34px;
  font-weight: 600;
  color: $text-color;
  margin-bottom: 16px;
  line-height: 1.4;
}

.subtitle {
  font-size: 28px;
  color: $text-color-secondary;
  margin-bottom: 12px;
  line-height: 1.4;
}

.text {
  font-size: 28px;
  color: $text-color-secondary;
  line-height: 1.6;
}

.button {
  background: $primary-color;
  color: #fff;
  border-radius: 999px;
  font-size: 30px;
  padding: 20px 32px;
  text-align: center;
  border: none;
  font-weight: 500;

  &:active {
    background: $primary-color-dark;
  }

  &.plain {
    background: transparent;
    color: $primary-color;
    border: 2px solid $primary-color;
  }
}

// 全局Taro组件样式
:global {
  // 设置全局主题色 - Taro组件
  radio .wx-radio-input.wx-radio-input-checked,
  checkbox .wx-checkbox-input.wx-checkbox-input-checked,
  switch .wx-switch-input.wx-switch-input-checked {
    background-color: $primary-color !important;
    border-color: $primary-color !important;
  }

  slider {
    .wx-slider-handle-wrapper {
      height: 28px;
    }

    .wx-slider-track {
      background-color: $primary-color !important;
    }
  }

  // 确保按钮的样式一致性
  button[type="primary"] {
    background-color: $primary-color !important;

    &.button-hover {
      background-color: $primary-color-dark !important;
    }
  }

  // 输入控件样式
  input, textarea {
    color: $text-color;
    font-size: $font-size-base;
  }

  // 日期选择器弹出框样式
  .picker-modal {
    background-color: $card-background !important;
  }

  .picker-view {
    background-color: $card-background !important;
  }

  // 日期选择器按钮
  .picker__btn {
    color: $primary-color !important;
  }

  // 选中项样式
  .picker-view__indicator {
    background-color: rgba($primary-color, 0.1) !important;
  }
}
